<script setup lang="ts">
// definePageMeta({
//   layout: 'home',
// })

// const online = useOnline()
const showPopup = ref(false)
const currentImage = ref('')

const showImage = (image: string) => {
  currentImage.value = image
  showPopup.value = true
}

const closePopup = () => {
  showPopup.value = false
}
</script>

<template>
  <div class="w-full min-h-screen relative">
    <Header />
    <div>
      <img 
        src="/assets/images/desc-1.png" 
        alt=""
        class="w-full h-auto object-contain"
      />
    </div>
    <div class="relative">
      <img 
        src="/assets/images/desc-2.png" 
        alt=""
        class="w-full h-auto object-contain"
      />
      <div class="absolute inset-0 flex flex-col items-center justify-around pt-[10%]">
        <div class="relative w-9/10">
          <img 
            src="/assets/images/jiutian.png" 
            alt=""
            class="w-full h-auto object-contain"
          />
          <img 
            src="/assets/images/jianjie.png" 
            alt=""
            class="absolute top-1 right-3 w-15 h-15 object-contain cursor-pointer"
            @click="showImage('/assets/images/jt-desc.png')"
          />
        </div>
        <div class="relative w-9/10">
          <img 
            src="/assets/images/qixian.png" 
            alt=""
            class="w-full h-auto object-contain"
          />
          <img 
            src="/assets/images/jianjie.png" 
            alt=""
            class="absolute top-1 right-3 w-15 h-15 object-contain cursor-pointer"
            @click="showImage('/assets/images/qx-desc.png')"
          />
        </div>
        <div class="relative w-9/10">
          <img 
            src="/assets/images/shuntian.png" 
            alt=""
            class="w-full h-auto object-contain"
          />
          <img 
            src="/assets/images/jianjie.png" 
            alt=""
            class="absolute top-1 right-3 w-15 h-15 object-contain cursor-pointer"
            @click="showImage('/assets/images/st-desc.png')"
          />
        </div>
      </div>
    </div>
    <div>
      <img 
        src="/assets/images/desc-3.png" 
        alt=""
        class="w-full h-auto object-contain"
      />
    </div>
    <!-- 弹窗组件 -->
    <div
      v-if="showPopup"
      class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
      @click="closePopup"
    >
      <img
        :src="currentImage"
        alt=""
        class="max-w-9/10 max-h-9/10 object-contain"
        @click.stop
      />
    </div>
    
  </div>
</template>
<!-- <style setup> 
  @keyframes scaleAnimation {
    0% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(1.0);
    }
    100% {
      transform: scale(0.8);
    }
  }

  .animate-scale {
    animation: scaleAnimation 3s ease-in-out infinite;
  }


  @keyframes float {
            0% {
                transform: translate(0px, 0px) rotate(0deg);
            }
            33% {
                transform: translate(5px, 5px) rotate(1deg);
            }
            66% {
                transform: translate(-3px, -3px) rotate(-1deg);
            }
            100% {
                transform: translate(0px, 0px) rotate(0deg);
            }
        }
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }


  @keyframes fadeInUp {
      from {
      opacity: 0;
      transform: translateY(20px);
      }
      to {
      opacity: 1;
      transform: translateY(0);
      }
  }

  .animate-fade-in-up {
      animation: fadeInUp 0.1s ease-out forwards;
  }

  .delay-\[100ms\]     { animation-delay: 100ms; }
</style> -->
